<template>
  <w-img :class="['w-mediaupload-value', {'z-loading': item.loading, 'z-canplay': canPlay, 'z-err': item.error}]" ref="thumbnail" :src="src" :data-url="dataURL"
    :width="upload.x.thumbnailWidth" :img-width="upload.x.thumbnailWidth-2" :img-height="upload.x.thumbnailHeight-2" :tip="tip" @click="click">
    <template v-if="upload.x.showFileName" #default>
      <div class="f-line-1">{{name}}</div>
    </template>
    <template #cover>
      <canvas v-if="item.loading" ref="loading" width="34" height="34" class="w-mediaupload-progress-loading f-abs-center"></canvas>
      <i v-else-if="canPlay" class="w-mediaupload-cover-play f-abs-center f-flex-center f-i f-i-play"></i>
      <i v-if="upload.isNormal" class="w-mediaupload-value-close f-flex-center f-i f-i-trash" :title="title" @click="remove"></i>
    </template>
  </w-img>
</template>

<script>
  import $ from '../dfish.js'

  export default {
    props: ['item'],
    inject: ['provideUpload'],
    data() {
      return {
        dataURL: null,
      }
    },
    methods: {
      click(e) {
        this.provideUpload.clickItem(e, this.item)
      },
      createImageThumbnail() {
        let r = new FileReader()
        r.onload = (e) => {
          if (this.item.loaded) return
          this.dataURL = e.target.result
        }
        r.readAsDataURL(this.item.file)
      },
      createVideoThumbnail() {
        let video = document.createElement('video')
        video.addEventListener('loadeddata', () => {
          setTimeout(() => {
            if (this.item.loaded) return
            let cvs = document.createElement('canvas')
            let ctx = cvs.getContext('2d')
            cvs.width = video.videoWidth
            cvs.height = video.videoHeight
            ctx.drawImage(video, 0, 0)
            this.dataURL = cvs.toDataURL('image/png')            
            video.pause()
            $.q(video).remove()
          }, 150)
        });
        video.src = URL.createObjectURL(this.item.file)
        video.muted = true
        video.play()
      },
      setProgress(a) {
        let cvs = this.$refs.loading
        if (!this.item.loading || !cvs) return
        let ctx = cvs.getContext('2d')
        cvs.width = cvs.width
        ctx.beginPath()
        ctx.translate(17, 17)
        ctx.moveTo(0, 0)
        ctx.arc(0, 0, 15, -Math.PI * .5, Math.PI * ((2 * a / 100) - .5))
        ctx.closePath()
        ctx.fillStyle = 'rgba(255,255,255,.7)'
        ctx.fill()
        ctx.beginPath()
        ctx.arc(0, 0, 16, 0, Math.PI * 2)
        ctx.strokeStyle = '#fff'
        ctx.stroke()
      },
      remove(e) {
        this.upload.remove(this.item)
        e.stopPropagation()
      },      
    },
    computed: {
      upload() {
        return this.provideUpload
      },
      img() {
        return this.$refs.thumbnail.$refs.img
      },
      src() {
        return this.item.value ? $.urlServer(this.item.value.thumbnail || this.upload.x.thumbnailSrc, this.item.value,
          this.upload.x.data) : ''
      },
      name() {
        return this.item.value ? this.item.value.name : this.item.file.name
      },
      tip() {
        return this.item.error ? this.item.error.message : this.name
      },
      title() {
        return $.loc.remove
      },
      canPlay() {
        return this.item.value && (this.upload.isVideo(this.item) || this.upload.isAudio(this.item))
      }
    },
    mounted() {
      if (!this.item.loaded && this.item.file) {
        this.upload.isVideo(this.item) ? this.createVideoThumbnail() : this.upload.isImage(this.item) ? this.createImageThumbnail() : null
        this.$watch(() => this.item.progress, v => this.setProgress(v), {
          immediate: true
        })
      }
    }
  }
</script>

<style>
  .w-mediaupload-value.z-loading .w-img-cover {
    background: rgba(0, 0, 0, .25);
  }

  .w-mediaupload-progress {
    width: 100%;
    height: 100%;
  }

  .w-mediaupload-progress-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
  }
</style>
